<html>    
  <head> 
    <script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script>        
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript" src="../gmap3-2.0-min.js"></script> 
    <style>
      .gmap3{
        margin: 20px auto;
        border: 1px dashed #C0C0C0;
        width: 500px;
        height: 250px;
      }
      #container{
        overflow: auto;
        text-align:center;
        width: 100px;
        margin: 20 auto;
      }
      .box{
        float: left;
        width: 20px;
        height: 20px;
        margin-left: 20px;
        background-color:#FFF;
        border:1px solid #000;
      }
    </style>
    <script type="text/javascript">
    
      function toggleColor(i, color){
        var $e = $('#over'+i);
        if ($e.hasClass('clicked')) {
          $e.removeClass('clicked').css('backgroundColor', '#FFFFFF');
        } else {
          $e.addClass('clicked').css('backgroundColor', color);
        }
      }
      
    $(function(){
      $('#test1').gmap3(
        {action: ':addRectangle',
          rectangle:{
            options:{
              bounds: {n:40.780, e:-73.932, s:40.742, w:-73.967},
              fillColor : "#FFAF9F",
              strokeColor : "#FF512F",
              clickable:true
            },
            events:{
              click:function(){
                toggleColor(1, '#FF512F');
              }
            }
          },
          map:{
            center: true,
            zoom:12
          }
        },
        {action: ':addRectangle',
          options:{
            bounds: [40.775, -73.937, 40.747, -73.962],
            fillColor : "#F4AFFF",
            strokeColor : "#CB53DF",
            clickable:true
          },
          events:{
            click:function(){
              toggleColor(2, '#CB53DF');
            }
          }
        },
        {action: ':addRectangle',
          bounds: {ne:[40.770436, -73.942185], sw:[40.752828, -73.957377]},
          radius : 750,
          fillColor : "#008BB2",
          strokeColor : "#005BB7"
        }
      );
    });
    </script>
  </head>
    
  <body>
    <div id="container">
      <div id="over1" class="box"></div>
      <div id="over2" class="box"></div>
    </div>
    <div id="test1" class="gmap3"></div>
  </body>
</html>